<template>
  <!-- 公共头 -->
  <header id="header">
    <section class="container">
      <h1 id="logo">
        <a href="#" title="谷粒学院">
          <img src="~/assets/img/logo.png" width="100%" alt="谷粒学院">
        </a>
      </h1>
      <div class="h-r-nsl">
        <ul class="nav">
          <router-link to="/" tag="li" active-class="current" exact>
            <a>首页</a>
          </router-link>
          <router-link to="/course" tag="li" active-class="current">
            <a>课程</a>
          </router-link>
          <router-link to="/teacher" tag="li" active-class="current">
            <a>名师</a>
          </router-link>
          <router-link to="/article" tag="li" active-class="current">
            <a>文章</a>
          </router-link>
          <router-link to="/question" tag="li" active-class="current">
            <a>问答</a>
          </router-link>
        </ul>
        <!-- / nav -->
        <!-- 未登录显示的登录按钮 -->
        <ul class="h-r-login">
          <li v-if="!user" id="no-login">
            <a href="/login" title="登录">
              <em class="icon18 login-icon">&nbsp;</em>
              <span class="vam ml5">登录</span>
            </a>
            |
            <a href="/register" title="注册">
              <span class="vam ml5">注册</span>
            </a>
          </li>
          <!-- 登录成功回显用户信息的标签 -->
          <!-- 注意undis将当前节点隐藏了 -->
          <li v-if="user" id="is-login-one" class="mr10 ">
            <a id="headerMsgCountId" href="#" title="消息">
              <em class="icon18 news-icon">&nbsp;</em>
            </a>
            <q class="red-point">&nbsp;</q>
          </li>
          <!-- 注意undis将当前节点隐藏了 -->
          <li v-if="user" id="is-login-two" class="h-r-user ">
            <a href="`/ucenter/${user.id}`" title>
              <img
                :src="user.avatar"
                width="30"
                height="30"
                class="vam picImg"
                alt
              >
              <span id="userName" class="vam disIb">{{ user.nickname }}</span>
            </a>
            <a href="javascript:void(0)" title="退出" class="ml5" @click="handleLogout">退出</a>
          </li>
          <!-- /未登录显示第1 li；登录后显示第2，3 li -->
        </ul>
        <aside class="h-r-search">
          <form action="#" method="post">
            <label class="h-r-s-box">
              <input type="text" placeholder="搜索课程" name="queryCourse.courseName" value>
              <button type="submit" class="s-btn">
                <em class="icon18">&nbsp;</em>
              </button>
            </label>
          </form>
        </aside>
      </div>
      <aside class="mw-nav-btn">
        <div class="mw-nav-icon"/>
      </aside>
      <div class="clear"/>
    </section>
  </header>
  <!-- /公共头 -->
</template>
<script>
import storage from '~/utils/storage'
import ucenterApi from '~/api/ucenter'
export default {
  data() {
    return {
      user: undefined
    }
  },
  // 回显操作无法使用create函数
  mounted() {
    // 判断如果请求参数中包含token参数 获取token存到localStorage中key为GULI-TOKEN
    if (this.$route.query.token) {
      // console.log(this.$route.query.token)
      storage.save('GULI-TOKEN', this.$route.query.token)
      window.location = '/'
    }
    // 回显
    const userToken = storage.get('GULI-USER')
    if (userToken) {
      this.user = JSON.parse(userToken)
      return
    }
    const token = storage.get('GULI-TOKEN')
    // 判断token是否存在
    if (token) {
      // 如果存在则进行解析回显到页头中
      ucenterApi.getUserInfo(token).then(r => {
        this.user = r.data.item
        // 然后将查询到的用户数据存储到localstorage中
        storage.save('USER-TOKEN', JSON.stringify(r.data.item))
      })
    }
  },
  methods: {
    // 注销操作  删除缓存
    handleLogout() {
      this.$confirm('您确定退出吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 删除缓存
        // storage.delete('GULI-USER')
        storage.delete('GULI-TOKEN')
        // 路由只会刷新加载的页面内容 页头和页尾不会刷新
        // this.$router.push('/')
        window.location = '/' // 修改浏览器地址栏地址
        // this.$message({
        //   type: 'success',
        //   message: '注销成功!'
        // })
      }).catch(() => {

      })
    }
  }
}
</script>
